.image_wrap{
    overflow: hidden;

    &.no_image_space{
        --mi-image-inner-space:0px;
    }
    &.image_space{
        --mi-image-inner-space:16rpx;
    }

    &.right image{
        border-radius: 0px;
    }
    &.fillet image{
        border-radius: 16rpx;
    }

    &.col_1{
        .image_li{
            width: calc(100% - var(--mi-image-inner-space));
        }
    }

    &.col_2{
        .image_li{
            width: calc(50% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
        }
    }

    &.col_3{
        .image_li{
            width: calc(33.3333333% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
        }
    }

    &.col_4{
        .image_li{
            width: calc(25% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
        }
    }

    &.col_5{
        .image_li{
            width: calc(20% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
        }
    }

    .img{
        width: 100%;
        height: 100%;
    }

    .image_ul{
        display: flex; flex-wrap: wrap; width: calc(100% + var(--mi-image-inner-space));

        .image_li{
            flex-shrink: 0;
            margin-bottom: var(--mi-image-inner-space);
        }

        .image_li_left, .image_li_right{
            width: calc(50% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
        }

        .image_li_right_hd, .image_li_right_ft{
            height: calc((100% - var(--mi-image-inner-space)) / 2);
        }

        .image_li_right_hd{
            margin-bottom: var(--mi-image-inner-space);
        }

        .image_li_right_ft{
            display: flex;


            .image_li_right_ft_li{
                flex: 1;
            }
        }

    }


}


